<template>
	<view class="user-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="二维码"></uni-navbar></view>

		<view class="img-box">
			<image class="img Poster" data-etype="image" :data-enode="bgSrc" :src="bgSrc" mode="scaleToFill"></image>
			<view class="info-text Poster" :data-etype="type" :data-enode="name">{{ name }}</view>
			<view class="info-text2 Poster" data-etype="text" :data-enode="stationUserNum">{{ stationUserNum }}</view>
			<view class="info-text3 Poster" data-etype="textarea" :data-enode="stationDesc">{{ stationDesc }}</view>

			<view class="info-image">
				<image class="Poster" data-etype="image" :data-enode="qrcodeSrc" :src="qrcodeSrc" :show-menu-by-longpress="true" mode="widthFix"></image>
				<uni-qrcode class="qrcode" id="uqrcode" ref="uqrcode" :size="size" :text="text"></uni-qrcode>
			</view>

			<image class="poster-img" :src="posterImg" :show-menu-by-longpress="true" mode="scaleToFill"></image>
		</view>

		<uni-poster width="750" height="1334" :list="list" @on-success="onSuccess" @on-error="onErr" ref="Eposter"></uni-poster>

		<view class="fiexd-btm">
			<view class="flex-box">
				<view class="form-btn" @click="save('Poster')">
					<image src="/static/img/btn_01.png" mode="widthFix"></image>
				</view>
				<view class="form-btn">
					<button class="btn" open-type="share"><image src="/static/img/btn_02.png" mode="widthFix"></image></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniQrcode from '@/components/uni-qrcode/uni-qrcode.vue';
import uniPoster from '@/components/uni-poster.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniQrcode,
		uniPoster
	},
	data() {
		return {
			id: '',
			name: '',
			stationDesc: '',
			stationUserNum: '',
			text: '',
			size: 200,
			qrcodeSrc: '',
			list: [],
			posterImg: '',
			type: 'text',
			bgSrc: 'https://zxtemp.tanghecms.com/ui/20230215.jpg'
		};
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id;
			this.name = decodeURI(option.name);

			if (this.name.length > 9) {
				this.type = 'textarea';
			}
			console.log(this.type);
		}

		this.loadLogin();
		this.loadData();
		this.text = 'https://zxtemp.tanghecms.com/ui/anqiu.html?id=' + this.id;
	},
	onReady() {
		// this.$nextTick(() => {
		// 	this.$nextTick(() => {
		// 		setTimeout(() => {
		// 			this.share('Poster');
		// 		}, 250);
		// 	});
		// });
	},
	onShareAppMessage(res) {
		return {
			title: this.name,
			path: '/pagesA/condi/app?id=' + this.id + '&name=' + this.name
		};
	},
	onShareTimeline(res) {
		return {};
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				// this.$logout();
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							this.jsCode = res.code;
							console.log(this.jsCode);
						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				});
			}
		},
		share(elClass) {
			this.$refs.uqrcode.toTempFilePath({
				success: (res) => {
					this.qrcodeSrc = res.tempFilePath;
					// this.$refs.Eposter.createForElRect(elClass, false);
				},
				fail: (res) => {
					console.log(res);
				}
			});
		},
		loadData() {
			this.$request('/system/station/codePath', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.stationDesc = res.data.stationDesc;
				this.stationUserNum = '站内代表数：' + res.data.userNum;
				this.qrcodeSrc = this.$imagePreview(res.data.exp2);
			});
		},
		save(elClass) {
			if (!this.qrcodeSrc) {
				this.share();
				return false;
			}
			// if (!this.posterImg) {
			// 	this.$refs.Eposter.createForElRect(elClass, false);
			// 	return false;
			// }
			this.$refs.Eposter.createForElRect(elClass, false);
		},
		onSuccess(val) {
			this.posterImg = val;
			console.log('onSuccess', val);
			this.saveImg(this.posterImg);
		},
		onErr(err) {
			console.log(`err`, err);
		},
		saveImg(filePath) {
			uni.saveImageToPhotosAlbum({
				filePath,
				success: (res) => {
					this.$msg('图片保存成功');
				},
				fail: (error) => {
					this.$msg('图片保存失败');
				}
			});
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
.user-view {
	overflow: hidden;
	height: 1334rpx;
	background-color: rgba(255, 0, 0, 1);
}

.img-box {
	position: relative;
	width: 100%;
	height: 1334rpx;
	// background: url('~@/static/img/bg_05.jpg') center top;
	// background-size: 100% auto;

	.img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 1334rpx;
	}

	.poster-img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 1334rpx;
		z-index: -100;
	}
}

.info-text {
	position: absolute;
	top: 164rpx;
	left: 50%;
	width: 630rpx;
	font-size: 18px;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-weight: 600;
	color: #fff;
	line-height: 40rpx;
	text-align: center;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.info-text2 {
	position: absolute;
	top: 246rpx;
	left: 50%;
	width: 630rpx;
	font-size: 14px;
	color: #666;
	line-height: 40rpx;
	text-align: center;
	transform: translate(-50%, 0);
	z-index: 10;
}

.info-text3 {
	position: absolute;
	top: 310rpx;
	left: 50%;
	width: 630rpx;
	height: 406rpx;
	font-size: 17px;
	color: #333;
	line-height: 58rpx;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	word-break: break-all;
	transform: translate(-50%, 0);
	z-index: 10;
}

.info-image {
	position: absolute;
	top: 938rpx;
	left: 50%;
	width: 200px;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.qrcode {
	position: fixed;
	left: -100vw;
}

.web-view {
	display: block;
}

.fiexd-btm {
	position: fixed;
	padding: 0 30rpx;
	bottom: 30rpx;

	.btn {
		padding: 0;
		width: 330rpx;
		height: 94rpx;
		border: 0;
		background-color: inherit;
		
		&::after {
			display: none;
		}
	}
}
</style>
